<template>
	<view class="content">
		<view class="search-container">

			<view class="search-icon">
				<image src="../static/images/tabbar/搜索.png"></image>
			</view>
			<input class="search-input" placeholder="请输入关键字搜索..." />
		</view>

		<!-- <image class="logo" src="../static/images/banner/微信图片_20250517190222.jpg"></image> -->
		  <swiper  class="swiper-box":indicator-dots="true"      :autoplay="true"             :loop="true"              :interval="3000"            :duration="500"              :vertical="false"         > 
		  <!-- 轮播项：每个 swiper-item 对应一张图 -->
		    <swiper-item v-for="(img, index) in imgList" :key="index">
		      <image  :src="img" mode="aspectFill" class="swiper-img"></image>
		    </swiper-item>
		  </swiper>

		<view class="text-area">
			<text class="title"></text>
		</view>
		<view class="dssg">
<view@click="change1">
			<image src="../static/images/banner/banner04.jpg"></image>
</view>
<view@click="change2">
			<image src="../static/images/banner/微信图片_20250517190219.jpg"></image></view>
			<view@click="change3">
			<image src="../static/images/banner/微信图片_20250517200522.jpg"></image></view>

		</view>
		<view>
			<image class="db" src="../static/images/banner/tp.jpg"></image>
		</view>
</view>
</template>
<script>
	  export default {
	    data() {
	       return {
	         // 轮播图图片地址（可替换为你的图片路径）
	         imgList: [
	          '/static/images/banner/tp2.jpg',    // 本地图片（需在项目static目录下）
	     '/static/images/banner/b1.jpg', // 网络图片
	      '/static/images/banner/b1.jpg',
	         ]
	       }
	     },
	    methods: {
	   
		  change1(){
			uni.navigateTo({
				url:"/pages/fruit/fruit"
			})
		  },
		  change2(){
			  uni.navigateTo({
			  	url:"/pages/fruit/fruit2"
			  })
		  },
		  change3(){
		  		  uni.navigateTo({
		  		  	url:"/pages/fruit/fruit3"
		  		  })
		  },
		  change4(){
		  		  uni.navigateTo({
		  		  	url:"/pages/fruit/fruit4"
		  		  })
		  }
	    }
	  }
</script>
<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 350rpx;
		width: 780rpx;
		margin-top: 20rpx;
		margin-left: 2px;
		margin-right: 1px;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.search-container {
		display: flex;
		align-items: center;
		background-color: #cecece;
		width: 700rpx;
		padding: 5rpx;
		border-radius: 30rpx;
		margin-top: 180rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.search-icon {
		margin-right: 10rpx;
	}

	.search-icon image {
		margin-top: 2rpx;
		margin-left: 10rpx;
		width: 15rpx;
		height: 15px;
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 20rpx;
		margin-bottom: 2rpx;
	}

	.dssg {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-left: 10rpx;
		margin-top: 20rpx;

	}

	.dssg image {
		width: 200rpx;
		height: 110px;
		margin: 0 20rpx;

	}

	.db {
		width: 780rpx;
		margin: 30rpx;

	}
	.swiper-box {
	  width: 100%;          /* 轮播图宽度占满屏幕 */
	  height: 400rpx;       /* 高度根据设计调整（rpx是uniapp适配单位） */
	}
	.swiper-img {
		
	  width: 100%;          /* 图片宽度占满容器 */
	  height: 100%;         /* 图片高度占满容器 */
	}
</style>